<template>
  <view class="section">
    <view class="info">
      <view class="info_content">
        <view class="info_title">
          拼读练习
        </view>
        <view class="info_box">
          <template v-if="wordList.length > 0">
            <WordSort
              :type="'1'"
              :list="wordList"
              @submit="saveRecord"
            ></WordSort>
          </template>
        </view>
      </view>
      <view class="info_content">
        <view class="info_title">
          拆分练习
        </view>
        <view class="info_box">
          <template v-if="segList.length > 0">
            <WordSort
              :type="'2'"
              :list="segList"
              @submit="saveRecord"
            ></WordSort>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { saveWordLearningRecord } from "@/api/sync";
import WordSort from "./WordSort.vue";
export default {
  components: { WordSort },
  props: {
    wordData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      wordList: [],
      segList: [],
      isCorrect1: undefined,
      isCorrect2: undefined,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.wordList = this.wordData.word.split("");
      this.segList = this.wordData.segList.map((item) => item.ipaUs);
      this
    },
    saveRecord(flag) {
      let params = {
        pass: flag ? 1 : 0,
        step: "3",
        type: "dclx",
        wordId: this.wordData.id,
      };
      saveWordLearningRecord(params);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordStep3";
</style>
